<script setup>
import { ref } from 'vue';

const progressValue = ref(50);
const customRangeValue = ref(100);

const incrementProgress = () => {
  progressValue.value = Math.min(100, progressValue.value + 10);
};

const decrementProgress = () => {
  progressValue.value = Math.max(0, progressValue.value - 10);
};
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Progress Bar Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Progress Bars</h3>
        <div class="flex flex-col space-y-8">
          <div>
            <h4 class="mb-2 text-sm font-medium">Default Progress Bar</h4>
            <ProgressBar :value="progressValue" />
            <div class="mt-2">Value: {{ progressValue }}%</div>
            <div class="mt-2 flex space-x-2">
              <Button size="small" @click="decrementProgress">-10%</Button>
              <Button size="small" @click="incrementProgress">+10%</Button>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Indeterminate</h4>
            <ProgressBar indeterminate />
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Min/Max Range</h4>
            <ProgressBar :min="50" :max="150" :value="customRangeValue" />
            <div class="mt-2">
              Value: {{ customRangeValue }} (Range: 50-150)
            </div>
            <input
              type="range"
              :min="50"
              :max="150"
              v-model.number="customRangeValue"
              class="mt-2 w-full"
            />
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Progress Bar Variations</h3>
        <div class="flex flex-col space-y-8">
          <div>
            <h4 class="mb-2 text-sm font-medium">Thickness Variations</h4>
            <div class="space-y-6">
              <div>
                <p class="mb-1 text-xs">Thin</p>
                <ProgressBar :value="70" thickness="thin" />
              </div>
              <div>
                <p class="mb-1 text-xs">Medium (Default)</p>
                <ProgressBar :value="70" thickness="medium" />
              </div>
              <div>
                <p class="mb-1 text-xs">Thick</p>
                <ProgressBar :value="70" thickness="thick" />
              </div>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Appearance Variations</h4>
            <div class="space-y-6">
              <div>
                <p class="mb-1 text-xs">Accent (Default)</p>
                <ProgressBar :value="80" appearance="accent" />
              </div>
              <div>
                <p class="mb-1 text-xs">Primary</p>
                <ProgressBar :value="80" appearance="primary" />
              </div>
              <div>
                <p class="mb-1 text-xs">Success</p>
                <ProgressBar :value="80" appearance="success" />
              </div>
              <div>
                <p class="mb-1 text-xs">Warning</p>
                <ProgressBar :value="50" appearance="warning" />
              </div>
              <div>
                <p class="mb-1 text-xs">Error</p>
                <ProgressBar :value="30" appearance="error" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
